<template>
  <div class="base-info">
    <div
      class="line"
      v-for="(item, idx) in infoList"
      :key="idx"
    >
      <div class="label">{{ item.label }}</div>
      <div class="value">{{ item.value }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    info: Object
  },
  data() {
    return {
      infoList: [
        {
          label: '真实姓名：',
          value: '',
          key: 'realName'
        },
        {
          label: '出生年月：',
          value: '*',
          key: 'birthDate'
        },
        {
          label: '性别：',
          value: '*',
          key: 'sexType'
        },
        {
          label: '星座：',
          value: '*',
        },
        {
          label: '身高（CM）：',
          value: '*',
          key: 'pureHeight',
        },
        {
          label: '体重（KG）：',
          value: '*',
          key: 'weight'
        },
        {
          label: '家乡：',
          value: '*',
          key: 'homeTown'
        },
        {
          label: '民族：',
          value: '*',
          key: 'bnation'
        },
        {
          label: '学历：',
          value: '*',
          key: 'eduBackground'
        },
        {
          label: '毕业学校（全称）：',
          value: '*',
          key: 'finalSchool'
        },
        {
          label: '职业：',
          value: '*',
          key: 'workJob'
        },
        {
          label: '家庭情况：',
          value: '*',
          key: 'familySituation'
        },
        {
          label: '工作单位：',
          value: '*',
          key: 'workCompany'
        },
        {
          label: '单身状况：',
          value: '*',
          key: 'emotionalState'
        },
        {
          label: '年收入（W）：',
          value: '*',
          key: 'yearIncome',
        },
        {
          label: '工作地：',
          value: '*',
          key: 'workCity'
        },
        {
          label: '房产情况：',
          value: '*',
          key: 'houseState'
        },
        {
          label: '情感经历：',
          value: '*',
          key: 'loveExperience'
        },
        {
          label: '未来发展城市：',
          value: '*',
          key: 'futureCity'
        },
        {
          label: '希望谈多久结婚：',
          value: '*',
          key: ''
        },
      ]
    }
  },
  watch: {
    info: {
      deep: true,
      handler() {
        this.initInfo()
      }
    }
  },
  methods: {
    /**
     * @desc 初始化数据
     */
    initInfo() {
      let { info } = this
      let extension = info.extension ? JSON.parse(info.extension) : {
        bnation: '*',
        weight: '*',
        unavailabe: '*'
      }
      info = {
        ...info,
        extension
      }
      let list = this.infoList.map(item => {
        let value = info[item.key]
        if (item.key == 'sexType') {
          value = this.initSex(value)
        }
        return {
          ...item,
          value
        }
      })
      this.infoList = JSON.parse(JSON.stringify(list))
    },
    /**
     * @desc 初始化性别
     */
    initSex(sex) {
      if (sex == '*') return '*'
      return sex == 1 ? '男' : '女'
    }
  },
  mounted() {
    this.initInfo()
  }
}
</script>
<style scoped lang="less">
.base-info{
  background: #fff;
  border-radius: 32px 32px 0 0;
  padding: 20px 24px;

  .line{
    display: flex;
    justify-content: flex-start;
    align-items: top;
    min-height: 50px;
    color: #ADB2BF;
    font-size: 28px;
    .value{
      color: #191A1D;
      font-weight: 500;
      flex: 1;
      
    }
  }
}
</style>